<!--
 * @Description: 特材库检验
 * @Author: wangwangwang
 * @Date: 2020-12-16 10:09:31
 * @LastEditors: wangwangwang
 * @LastEditTime: 2021-05-17 14:47:59
-->
<template>
  <div class="pages_content table">
    <el-container>
      <el-header>
        <breaDcrumb />
      </el-header>
      <el-main style="display:flex">
        <div>
          <div class="header_right" @click="showCardNav = !showCardNav">
            <div class="title">搜索</div>
            <div>
              <transition name="from"></transition>
              <span v-show="!showCardNav">
                <i style="margin-right: 5px;" class="el-icon-arrow-down"></i>
              </span>
              <transition name="to"></transition>
              <span v-show="showCardNav">
                <i style="margin-right: 5px;" class="el-icon-arrow-up"></i>
              </span>
            </div>
          </div>
          <div v-show="showCardNav" class="hr"></div>
          <el-collapse-transition>
            <div v-show="showCardNav">
              <div class="search">
                <span style="display: inline-block;margin-bottom: 10px;">
                  <span v-if="typeId>2" style="margin-right: 12px">特材成品名称</span>
                  <span v-else style="margin-right: 12px">特材原料名称</span>
                  <el-input v-if="typeId>2" v-model="tableParam.productName" style="width: 150px;" placeholder="请输入" @keyup.enter.native="gettableData()"></el-input>
                  <el-input v-else v-model="tableParam.rawName" style="width: 150px;" placeholder="请输入" @keyup.enter.native="gettableData()"></el-input>
                </span>
                <span style="margin-left: 24px">
                  <span v-if="typeId>2" style="margin-right: 12px">成品型号</span>
                  <span v-else style="margin-right: 12px">原料型号</span>
                  <el-input v-if="typeId>2" v-model="tableParam.productModel" style="width: 120px;" placeholder="请输入" @keyup.enter.native="gettableData()"></el-input>
                  <el-input v-else v-model="tableParam.rawModel" style="width: 120px;" placeholder="请输入" @keyup.enter.native="gettableData()"></el-input>
                </span>
                <span style="margin-left: 24px">
                  <span style="margin-right: 12px">状态</span>
                  <el-select v-model="tableParam.state" clearable style="width: 100px;" placeholder="请选择">
                    <el-option label="待取样" value="0"></el-option>
                    <el-option label="已检测" value="2"></el-option>
                    <el-option label="待检测" value="1"></el-option>
                    <el-option label="审批中" value="3"></el-option>
                  </el-select>
                </span>
                <el-button icon="el-icon-search" size="medium" class="bottom_all" @click="(tableParam.page = 1), searchSubmit()">查 询</el-button>
                <el-button size="medium" class="bottom_all_two" style="margin-left: 12px" @click="init()">重 置</el-button>
                <el-button size="medium" class="bottom_all_two" style="margin-left: 12px" @click="tableParamType = true">高级搜索</el-button>
              </div>
            </div>
          </el-collapse-transition>
          <div class="hr"></div>
          <div class="card">
            <div v-loading="tableLoading" class="card_info" :style="style">
              <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="tableData" tooltip-effect="dark">
                <el-table-column type="index" label="检测编号" width="80">
                </el-table-column>
                <el-table-column prop="company" label="公司" width="150">
                </el-table-column>
                <el-table-column prop="state" label="状态">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.state === 2" type="success">已检验</el-tag>
                    <el-tag v-else-if="scope.row.state === 1" type="warning">待检验</el-tag>
                    <el-tag v-else-if="scope.row.state === 3" type="warning" style="cursor: pointer;"  @click="handleToCenterTask">审批中</el-tag>
                    <el-tag v-else-if="scope.row.state === 4" type="warning">未通过</el-tag>
                    <el-tag v-else-if="scope.row.state === 5" type="warning">已撤销</el-tag>
                    <el-tag v-else type="warning">待取样</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="checkResult" label="自动检验结果" width="110">
                </el-table-column>
                <el-table-column label="视频">
                  <template slot-scope="scope">
                    <el-button v-if="scope.row.videoUrl" class="bottom_text" type="text" size="small" @click="handleVideo(scope.row.videoUrl)">查看视频</el-button>
                    <span v-else>-</span>
                  </template>
                </el-table-column>
                <el-table-column prop="materialNo" :label="typeId<3?'来料编号':'生产计划编号'" width="90">
                </el-table-column>
                <el-table-column prop="createTime" width="150" label="生成时间">
                </el-table-column>
                <el-table-column width="160" :label="typeId<3?'特材原料名称':'特材成品名称'">
                  <template slot-scope="scope">
                    <span v-if="typeId<3">{{scope.row.rawName}}</span>
                    <span v-else>{{scope.row.productName}}</span>
                  </template>
                </el-table-column>
                <el-table-column :label="typeId<3?'原料型号':'成品型号'">
                  <template slot-scope="scope">
                    <span v-if="typeId<3">{{scope.row.rawModel}}</span>
                    <span v-else>{{scope.row.productModel}}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="checkUserName" label="检验人">
                </el-table-column>
                <el-table-column prop="checkTime" width="150" label="检验时间">
                </el-table-column>
                <el-table-column prop="remark" label="备注">
                </el-table-column>
                <el-table-column prop="method" label="处理方式">
                  <template slot-scope="scope">
                    <div v-if="typeId<3">
                      <span v-if="scope.row.method == 1">复检</span>
                      <span v-else-if="scope.row.method == 2">退料</span>
                      <span v-else>/</span>
                    </div>
                    <div v-else>
                      <span v-if="scope.row.method">{{scope.row.method}}</span>
                      <span v-else>/</span>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column fixed="right" width="100" label="操作" align="left">
                  <template slot-scope="scope">
                    <el-button v-if="scope.row.state === 0&&ButtonList.findIndex(res=>(res.buttonValue=='QUYANG'))!==-1" class="bottom_one" size="mini" @click="makeupdStatusFun(scope.row);">
                      取样
                    </el-button>
                    <el-button v-else-if="(scope.row.state === 1||scope.row.state === 4||scope.row.state === 5)&&ButtonList.findIndex(res=>(res.buttonValue=='JIANCELR'))!==-1" class="bottom_one" size="mini" @click="checkOutIn(scope.row);">
                      检测录入
                    </el-button>
                    <el-button v-else class="bottom_one" size="mini" @click="handleDetails(scope.row);">
                      查看
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
            <div class="card_bottom">
              <div class="card_bottom_left">
                <div class="top_page_totle">总共{{ total }}条</div>
                <el-pagination :current-page.sync="tableParam.page" :page-size="tableParam.pageSize" :page-sizes="[10, 20, 30, 40,50,100,200,500,1000]" layout="prev,pager,sizes,next,jumper" :total="total" @size-change="sizeChange" @current-change="gettableData()"></el-pagination>
              </div>
              <div>
                <el-button size="mini" icon="el-icon-refresh-right" class="bottom_all_two" @click="gettableData">刷新</el-button>
              </div>
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <!-- 视频查看 -->
    <el-dialog v-dialogDrag :visible.sync="Dialog1" width="980px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">图片信息</span>
      <div class="dialoginfo">
        <div>
          <el-image v-for="(item, index) in arr1" :key="index" style="width: 200px; height:200px;margin:0 10px 10px 10px;border-radius: 4px;" :src="item" :preview-src-list="arr1" :z-index="10000"></el-image>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="Dialog1 = false">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 检测录入及查看 -->
    <el-dialog v-dialogDrag :visible.sync="visible" width="880px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">{{`检测${readOnly?'查看':'录入'}`}}</span>
      <div>
        <div class="dialoginfo-title">
          <div v-if="typeId<3">
            <span>供应商：</span>
            <span>{{checkOutData.supplierName}}</span>
          </div>
          <div>
            <span>{{typeId>2?'特材成品名称：':'特材原料名称：'}}</span>
            <span>{{checkOutData.rawName || checkOutData.productName}}</span>
          </div>
          <div>
            <span>{{typeId>2?'成品型号：':'原料型号：'}}</span>
            <span>{{checkOutData.rawModel || checkOutData.productModel}}</span>
          </div>
        </div>
        <el-table :header-cell-style="{ background: '#f3f6f9' }" :cell-style="{ borderRight: 'none' }" border stripe style="width:100%" :data="dataSource" tooltip-effect="dark" height="100%">
          <template v-for="(item, index) in tableNav">
            <el-table-column :key="index" :label="item.name" align="center" :width="index == 0 ? '120px' : 'auto'">
              <template slot-scope="scope">
                <span v-if="index == 0">{{ scope.row[index] }}</span>
                <div v-if="index !== 0 && scope.row[index]">
                  <el-select v-if="scope.row[index].type == 1" v-model="scope.row[index].testValue" :disabled="readOnly" placeholder="请选择" style="width:100%;" @input="$forceUpdate()">
                    <el-option v-for="(item, index) in JSON.parse(scope.row[index].symbol)" :key="index" :label="item.name" :value="item.name"></el-option>
                  </el-select>
                  <el-input v-if="scope.row[index].type == 2" v-model="scope.row[index].testValue" style="width:100%;" disabled></el-input>
                  <span v-if="scope.row[index].type == 3">
                    <span>{{scope.row[index].content.split(',')[0]}}{{ scope.row[index].symbol }}{{scope.row[index].content.split(',')[1]}}</span>
                    <span v-if="scope.row[index].symbol.length==1">
                      <el-input v-model="scope.row[index].testValue" onkeypress='return( /\d|\.|\-/.test(String.fromCharCode(event.keyCode)))' :disabled="readOnly" style="width: 100%;" placeholder="请输入检验值" clearable @input="scope.row[index].testValue=$regExp.checkNum(scope.row[index].testValue),$forceUpdate()" @blur="scope.row[index].testValue=$regExp.blurCheckNum(scope.row[index].testValue,true),$forceUpdate()"></el-input>
                    </span>
                    <span v-else>
                      <el-input v-model="scope.row[index].testValue" :disabled="readOnly" style="width: 100%;" placeholder="请输入检验值" clearable onkeypress='return( /\d|\.|\-/.test(String.fromCharCode(event.keyCode)))' @input="scope.row[index].testValue=$regExp.checkNum(scope.row[index].testValue),$forceUpdate()" @blur="scope.row[index].testValue=$regExp.blurCheckNum(scope.row[index].testValue,true),$forceUpdate()"></el-input>
                    </span>
                  </span>
                </div>
              </template>
            </el-table-column>
          </template>
        </el-table>
        <el-row type="flex" style="margin-top: 30px;">
          <el-col style="width:50px;">备注：</el-col>
          <el-col>
            <el-input v-model="remark" :disabled="readOnly" type="textarea" :rows="2" placeholder="请输入内容">
            </el-input>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="visible=false">关 闭</el-button>
        <el-button v-show="!readOnly" class="bottom_all" @click="checkInSubmit">提交录入</el-button>
      </span>
    </el-dialog>
    <el-dialog v-dialogDrag :close-on-click-modal="false" title="结果判断" :visible.sync="dialogVisible" width="40%">
      <div v-if="result">
        系统检测结果为： OK
      </div>
      <div v-else>
        系统检测结果为： NG
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="dialogVisible=false">取 消</el-button>
        <el-button v-if="!result" class="bottom_all" type="primary" @click="handleToFlow">进入审核</el-button>
        <el-button v-else class="bottom_all" type="primary" @click="handleSure">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 高级搜索 -->
    <el-dialog v-dialogDrag :visible.sync="tableParamType" width="650px" :close-on-click-modal="false">
      <span slot="title" class="dialog-title">高级搜索</span>
      <div class="dialoginfo">
        <el-form ref="reftableParam" :key="9.99" :inline="true" :model="tableParam" label-width="110px">
          <el-form-item>
            <span slot="label">交货车辆</span>
            <el-input v-model="tableParam.carNo" tplaceholder="请输入" clearable style="width:400px;"></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">检验人</span>
            <el-input v-model="tableParam.detection" tplaceholder="请输入" clearable style="width:400px;"></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">检验时间</span>
            <el-date-picker v-model="startTimDateEndTimDate" type="datetimerange" unlink-panels value-format="yyyy-MM-dd HH:mm:ss" start-placeholder="开始日期" end-placeholder="结束日期" @change="tableParam.createTime=startTimDateEndTimDate[0]||'',tableParam.updateTime=startTimDateEndTimDate[1]||''"></el-date-picker>
          </el-form-item>
          <el-form-item>
            <span slot="label">合同编号</span>
            <el-input v-model="tableParam.contractNo" tplaceholder="请输入" clearable style="width:400px;"></el-input>
          </el-form-item>
          <el-form-item>
            <span slot="label">供应商名称</span>
            <el-input v-model="tableParam.supplierName" tplaceholder="请输入" clearable style="width:400px;"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button class="bottom_all_two" @click="tableParamType=false,tableParam.carNo='',tableParam.detection='',startTimDateEndTimDate=[],tableParam.createTime='',tableParam.updateTime='',tableParam.contractNo='',tableParam.supplierName=''">取 消</el-button>
        <el-button class="bottom_all" style="margin-left: 24px" @click="gettableData(),tableParamType=false">搜 索</el-button>
      </span>
    </el-dialog>
    <!-- 查看图片 -->
    <ShowDetails :dialog="imgsDialog" :imgList="imgList" :mp4List="mp4List" @reset="imgsDialog=false"></ShowDetails>
  </div>
</template>

<script>
import mixin from "@/mixins/ICPSmixin.js";
import {  getCheckData1, getCheckData2, updRawInfo, submitContent, getcheckedSubmitInfo, updRawInfo2, submitContent2, getcheckedSubmitInfo2, getAcceptanceCriteria, saveSubmitContent, saveSubmitContent2
} from "@/api/smart/specialmaterial/checkout.js";
import ShowDetails from '@/components/showdetails';
import { getUserInfo } from "@/utils/auth.js";
export default {
  props: ['type', 'typeId'],
  mixins: [mixin],
  components: {
    ShowDetails
  },
  data() {
    return {
      startTimDateEndTimDate: [],
      tableParamType: false,
      imgsDialog: false,
      imgList: [],
      mp4List: [],
      queryPage: getCheckData1,
      Dialog1: false,
      Dialog2: false,
      pagesType: 0,
      arr1: [],
      checkOutData: {},
      readOnly: false,
      visible: false,
      tableNav: [],
      dataSource: [],
      remark: '',
      dialogVisible: false,
      result: '',
    };
  },
  created() {
    if (this.typeId === '3' || this.typeId === '4') { // 成品检测
      this.queryPage = getCheckData2;
      this.tableParam = { ...this.tableParam };
    } else {
      this.tableParam = { ...this.tableParam };
    }
    if (this.typeId === '2' || this.typeId === '4') {
      this.tableParam.isRecheck = 'y'
    }
    this.tableParam = { ...this.tableParam, rawName: '', rawModel: '', carNo: '', detection: '', createTime: '', updateTime: '', contractNo: '', supplierName: '' };
    this.gettableData();
  },
  methods: {
    handleToCenterTask () {
      this.$router.push({ name: 'iama' });
    },
    init() {
      /*重置数据*/
      this.tableParam.rawName = "";
      this.tableParam.productName = '';
      this.tableParam.rawModel = "";
      this.tableParam.productModel = "";
      this.tableParam.state = "";
      this.tableParam.carNo = "";
      this.tableParam.detection = "";
      this.startTimDateEndTimDate = "";
      this.tableParam.createTime = "";
      this.tableParam.updateTime = "";
      this.tableParam.contractNo = "";
      this.tableParam.supplierName = "";
      this.gettableData();
    },
    makeupdStatusFun(d) {
      this.$confirm('是否确认取样?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'bottom_all_two',
        confirmButtonClass: 'bottom_all',
        type: 'warning'
      }).then(() => {
        let json = {
          id: d.id,
          state: 1
        }
        let baseUrl = updRawInfo;
        if (this.type === '2') {
          baseUrl = updRawInfo2
        }
        baseUrl(json).then((res) => {
          if (res.code == 1001) {
            this.searchSubmit()
          }
        })
      }).catch(() => {
      });
    },
    searchSubmit() {
      this.gettableData();
    },
    handleVideo(url) {
      if (!url) {
        this.$message.warning('视频为空')
        return
      }
      let items = url.split(",").map(res => ('/file/' + res))
      this.imgList = items.filter(res => (res.includes('type=img')))
      this.mp4List = items.filter(res => (res.includes('type=mp4')))
      this.imgsDialog = true
    },
    checkOutIn(data) {
      console.log(data);
      this.remark = '';
      const params = {
        companyId: data.companyId,
        productId: data.productId,
        rawId: data.rawID,
        typeId: this.typeId,
      }
      getAcceptanceCriteria(params).then(res => {
        if (res.code === 1001) {
          this.checkOutData = data;
          console.log(data);
          this.visible = true;
          this.readOnly = false;
          /**
           * @Description: 构造数据
           * @Param: 
           * @Author: wangwangwang
           */
          this.tableNav = res.data.claim; // 表头数据
          this.dataSource = res.data.list; // 表单数据
          // this.dataSource.forEach((v) => {
          //   for (let i in v) {
          //     if (i != 0) {
          //       v[i].testValue = v[i].content
          //     }
          //   }
          // })
          console.log(this.dataSource);
          this.tableNav.unshift({
            name: "验收项目"
          })
        }
      })
    },
    /**
     * @Description: 查看数据详情
     * @Param: 
     * @Author: wangwangwang
     */
    async handleDetails(data) {
      this.remark = data.remark;
      let baseUrl = getcheckedSubmitInfo;
      if (this.type === '2') {
        baseUrl = getcheckedSubmitInfo2;
      }
      const params1 = {
        companyId: data.companyId,
        productId: data.productId,
        rawId: data.rawID,
        typeId: this.typeId,
      }
      await getAcceptanceCriteria(params1).then(res => {
        if (res.code === 1001) {
          this.checkOutData = data;
          this.visible = true;
          /**
           * @Description: 构造数据
           * @Param: 
           * @Author: wangwangwang
           */
          this.tableNav = res.data.claim; // 表头数据
          this.dataSource = res.data.list; // 表单数据
          this.tableNav.unshift({
            name: "验收项目"
          })
        }
      })
      const params = {
        checkId: data.id,
      }
      await baseUrl(params).then(res => {
        if (res.code === 1001) {
          this.readOnly = true;
          this.dataSource.forEach((v) => {
            res.data.data.forEach((v2) => {
              for (let i in v) {
                if (v[i].itemsId && v2.projectId == v[i].itemsId && v2.requireId == v[i].claimId) {
                  v[i].testValue = v2.content;
                }
              }
            })
          })
          this.$forceUpdate();
        }
      })
    },
    checkInSubmit() {
      const params = [];
      for (let i = 0; i < this.dataSource.length; i += 1) {
        for (let item in this.dataSource[i]) {
          if (item !== '0' && this.dataSource[i][item]) {
            const data = {
              checkId: this.checkOutData.id,
              typeId: this.typeId,
              companyId: this.checkOutData.companyId,
              rawId: this.typeId < 3 ? this.checkOutData.rawID : this.checkOutData.productId,
              projectId: this.dataSource[i][item].itemsId,
              requireId: this.dataSource[i][item].claimId,
              content: this.dataSource[i][item].testValue,
            }
            params.push(data)
          }
        }
      }
      let baseUrl = submitContent;
      if (this.type === '2') {
        baseUrl = submitContent2;
      }
      /**
       * @Description: 录入检测结果、如果结果为NG 则流程
       * @Param: 
       * @Author: wangwangwang
       */
      baseUrl(params).then(res => {
        if (res.code === 1001) {
          this.result = res.data.result === 'OK';
          this.dialogVisible = true;
        }
      })
    },
    /**
     * @Description: 结果为OK点击确定改变状态
     * @Param: 
     * @Author: wangwangwang
     */
    handleSure() {
      const params = [];
      for (let i = 0; i < this.dataSource.length; i += 1) {
        for (let item in this.dataSource[i]) {
          if (item !== '0' && this.dataSource[i][item]) {
            const data = {
              checkId: this.checkOutData.id,
              typeId: this.typeId,
              companyId: this.checkOutData.companyId,
              rawId: this.typeId < 3 ? this.checkOutData.rawID : this.checkOutData.productId,
              projectId: this.dataSource[i][item].itemsId,
              requireId: this.dataSource[i][item].claimId,
              content: this.dataSource[i][item].testValue,
            }
            params.push(data)
          }
        }
      }
      /**
       * @Description: 录入检测结果、如果结果为NG 则流程
       * @Param: 
       * @Author: wangwangwang
       */
      let baseUrl = saveSubmitContent;
      if (this.type === '2') {
        baseUrl = saveSubmitContent2;
      }
      baseUrl(params).then(res => {
        if (res.code === 1001) {
          /**
           * @Description: 改变状态
           * @Param: 
           * @Author: wangwangwang
           */
          const params2 = {
            id: this.checkOutData.id,
            state: 2,
            checkResult: 'OK',
            remark: this.remark,
            checkTime: new Date().Format("yyyy-MM-dd hh:mm:ss"),
            checkUserId: getUserInfo().userId,
            checkUserName: getUserInfo().userRealName,
          }
          let baseUrl2 = updRawInfo;
          if (this.type === '2') {
            baseUrl2 = updRawInfo2;
          }
          baseUrl2(params2).then(res => {
            if (res.code === 1001) {
              this.dialogVisible = false;
              this.visible = false;
              this.$message.success('检测已录入');
              this.gettableData();
            }
          })
          this.dialogVisible = false;
          this.gettableData();
        }
      })
    },
    /**
     * @Description: 结果为NG进入审核
     * @Param: 
     * @Author: wangwangwang
     */
    handleToFlow() {
      const params2 = {
        id: this.checkOutData.id,
        checkTime: new Date().Format("yyyy-MM-dd hh:mm:ss"),
        checkUserId: getUserInfo().userId,
        checkUserName: getUserInfo().userRealName,
      }
      let baseUrl2 = updRawInfo;
      if (this.type === '2') {
        baseUrl2 = updRawInfo2;
      }
      baseUrl2(params2)
      const copyData1 = JSON.parse(JSON.stringify(this.tableNav));
      const copyData2 = JSON.parse(JSON.stringify(this.dataSource));
      const params = {
        code: this.checkOutData.code,
        supplierName: this.checkOutData.supplierName,
        rawName: this.checkOutData.rawName,
        rawModel: this.checkOutData.rawModel,
        productName: this.checkOutData.productName,
        productModel: this.checkOutData.productModel,
        id: this.checkOutData.id,
        companyId: this.checkOutData.companyId,
        rawID: this.typeId < 3 ? this.checkOutData.rawID : this.checkOutData.productId,
        productId: this.checkOutData.productId,
        type: 1,
        tableTitle: JSON.stringify(copyData1),
        tableDataSource: JSON.stringify(copyData2),
        remark: this.remark,
        typeId: this.typeId,
      }
      this.dialogVisible = false;
      this.visible = false;
      this.$router.push({ name: "SpecialCheckFlows", query: params });
    },
    sizeChange(value) {
      this.tableParam.pageSize = value;
      this.gettableData();
    },
  },
};
</script>

<style lang="scss" scoped>
.dialoginfo-title {
  display: flex;
  justify-content: space-between;
  padding: 10px 0 20px 0;
  font-weight: bold;
}
.el-input,
.el-select {
  width: 240px;
}
.table_link {
  margin: 0 10px;
  color: $bg_color;
}

.table_link:hover {
  opacity: 0.8;
}
</style>

